<template>
  <el-dialog
    class="dialog"
    title="修改密码"
    :visible.sync="dialogVisible"
    width="50%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
    >
      <el-form-item label="旧密码:" prop="oldPassword">
        <el-input show-password type="password" placeholder="请输入旧密码" v-model="form.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码:" prop="newPassword">
        <el-input show-password type="password" placeholder="请输入新密码" v-model="form.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="再次输入新密码:" prop="againPassword">
        <el-input show-password type="password" :disabled="!form.newPassword" placeholder="请重复输入新密码" v-model="form.againPassword"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose()">取 消</el-button>
      <el-button
        size="small"
        :loading="buttonLoading"
        type="primary"
        @click="submit()"
      >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { changePass } from '@/api/login'
import encryption from '@/utils/encryption'
export default {
  name: 'changePassDialog',
  props:{
    dialogVisible:{
      type:Boolean
    }
  },
  data(){

    return {
      rules: {
        oldPassword:[  {
          required: true,
          message: "清输入旧密码",
        },],
        newPassword:[  {
          required: true,
          message: "请输入新密码",
        },],
        againPassword: [
          {
            required: true,
            message: "请再次输入新密码",
          },
          {
            validator: this.validatePhone,
            trigger: "blur",
          },
        ],
      },
      form:{
        oldPassword:"",
        newPassword:"",
        againPassword:""
      },
      buttonLoading:false
    }
  },
  methods:{
    validatePhone (rule, value, callback){
      if (this.form.newPassword != this.form.againPassword) {
        // callback(new Error('长度必须在2-10个之间'))
        callback(new Error("请再次输入的密码与新密码一致"));
      } else {
        callback(); // 通过
      }
    },
    handleClose(){
      this.$emit("close",false);
    },
    submit(){
      this.$refs.form.validate((e)=>{
        if(e){
          this.buttonLoading = true
          changePass({
            userId:this.$store.state.user.USER_INFO.id,
            oldPassword:encryption(this.form.oldPassword),
            newPassword:encryption(this.form.newPassword),
            againPassword:encryption(this.form.againPassword)
          }).then(response=>{
            this.buttonLoading = false
            if(response.code == 200){
              this.$emit("close");
              this.$message.success("修改成功");
              this.$router.replace("/");
              this.$message.error("您的身份信息已过期，请重新登录");
              sessionStorage.removeItem("userInfo");
              sessionStorage.removeItem("token");
              this.$store.commit("user/SET_TOKEN", "");
            }else{
              this.$message.error(response.message)
            }
          }).catch(()=>{
            this.buttonLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
